<style lang="scss" scoped>
	.pdata {
		height: 100%;
		@include n-col1;
		align-items: stretch;

		.pdata-main {
			gap: 30px;
			height: 0;
			flex: 1;
			@include n-row1;
			align-items: stretch;
		}

		.pdata-info {
			padding: 25px;
			border-radius: 20px;
			background: $theme-bg-white1;
			@include n-col1;
			align-items: stretch;
			width: 360px;
			box-shadow: 0 0 15px 1px $theme-shadow2;

			>header {
				margin-bottom: 35px;
				@include n-row1;
				align-items: flex-start;
				gap:10px;

				>article {
					flex: 1;
					padding-top: 10px;
					width: 0;

					>h3 {
						font-size: 13px;
						line-height: 1;
						color: $theme-text4;
					}

					>p {
						font-size: 16px;
						margin-top: 10px;
						line-height: 1;
						color: $theme-text3;
						>input{
							height: 32px;
							width: 100%;
							border: 0;
							border-bottom: 1px solid $theme-border1;
						}
					}
				}

				>i {
					--size: 45px;
					background: var(--theme-color-light9);
				}
			}

			>h3 {
				font-size: 16px;
				margin-bottom: 15px;
				line-height: 1;
				color: $theme-text3;
			}

			>article {
				height: 0;
				flex: 1;
				font-size: 14px;
				line-height: 1.6;
				overflow: hidden auto;
				color: $theme-text4;
			}
		}

		.pdata-right {
			flex: 1;
			width: 0;
			overflow: hidden auto;
		}
		.n-page{
			margin-top: 20px;
			text-align: right;
		}

	}
</style>

<template>

	<div class="n-page pdata">
		<!--    <p class="n-page-back"><span><i class="el-icon-back"></i>返回</span></p>-->
		<h1 class="n-page-h1"><em>{{ $route.meta.title }}</em>
<!--			<el-button icon="el-icon-plus" type="primary">添加任务</el-button>-->
		</h1>
		<div class="pdata-main">
			<div class="pdata-info">
				<header>
					<article>
						<h3>直播间URL</h3>
						<p><input placeholder="请输入" v-model="params.url" /></p>
					</article>
					<i :class="{'n-page-iconBtn':1, 'el-icon-video-play': !params.isPlay, 'el-icon-video-pause': params.isPlay }" @click="state(params.isPlay = !params.isPlay)"></i>
				</header>

				<h3>直播间消息</h3>
				<article>
					<p v-for="item in list">
						<span v-if="item.method === 'WebcastChatMessage'">评论内容</span>
						<span v-if="item.method === 'WebcastSocialMessage'">关注</span>
						：{{item.content}}
					</p>
				</article>
			</div>

			<div class="pdata-right">
				<div class="n-page-h3">
					<span>直播间消息</span>

					<ul class="n-page-iconBtns">
<!--						<li class="el-icon-s-grid n-page-iconBtn n-page-iconBtn-cur"></li>-->
<!--						<li class="el-icon-collection-tag n-page-iconBtn"></li>-->
<!--						<li class="el-icon-files n-page-iconBtn"></li>-->
					</ul>

<!--					<i class="el-icon-scissors n-page-iconBtn"></i>-->
				</div>
				<el-table :data="list2">
					<el-table-column  label="#" type="index" />
					<el-table-column v-if="0" label="用户" prop="nickname"/>
					<el-table-column v-if="0" label="消费等级" prop="level"/>
					<!-- <el-table-column label="操作类型" prop="type" :formatter="v=> $enu.__map.liveType[v.type]" /> -->
					<el-table-column label="评论内容" prop="content" />
					<el-table-column label=" ">
						<template #default="{row}">
							<el-popover v-if="row.sec_uid" placement="left" trigger="hover">
								<i slot="reference" class="fa fa-qrcode"></i>
								<div v-ref="({el})=> el && qrcode(row,el)"></div>
							</el-popover>
							
							 
						</template>
					</el-table-column>
				</el-table>
				<n-page :params="params"  />
			</div>
		</div>
	</div>
</template>

<script>
	import QRCode from '@/utils/qrcode'
	// import webmssdk from '@/utils/webmssdk.es5'

	import CryptoJS from 'crypto-js';
	import wssSdk from '@/utils/webmssdk.es5.js'
	import {
		DyClient,
		handleMessage
	} from '@/utils/client.js'

	export default {
		data() {
			console.log(wssSdk)
			return {
				params: {
					url: '',
					total:0,
					page:1,
					pageSize:10,
					isPlay:false,
				},
				list: []
			}
		},
		computed:{
			list2(){
				const {params:{page,pageSize},list} = this;
				return list.slice( (page - 1) * pageSize, page * pageSize )
			}
		},
		mounted() {
			window.vv = this;
			this.ws = null;
			// https://blog.csdn.net/weixin_44786530/article/details/139857024
			// webmssdk()
		},
		methods: {
			async saveComment({method:action_type, content, sec_uid,level}){
				if(!this.$auth.isLogin()) return 
				const {$store:{userInfo:{name:username}}} = this;
				this._req(this.$api.live.saveComment({username, action_type, content,sec_uid, level:level || 1  }),{});
			},
			async state(v){
				const {ws,params,loading} = this;
				if(loading) return;
				!v && ws && ws.close();
				if(v && (!ws || ws.readState !== ws.OPEN)) this.connection();
				params.isPlay = v;
			},
			async connection() {
				if(!this.params.url) return this.$msg('请输入直播间URL',1)
				
				const res = await this._req(this.$api.user.getwsslink({url:this.params.url}));
				if (!res) return;
		 
				const roomId = res.data.room_id;
				const uniqueId = `7450799777987937830`
				
				this.list = []
				let sign = window.getSign(roomId, uniqueId)['X-Bogus'];
				let now = Date.now();
				let wsUrl = `wss://webcast3-ws-web-hl.douyin.com/webcast/im/push/v2/?app_name=douyin_web&version_code=180800&webcast_sdk_version=1.3.0&update_version_code=1.3.0&compress=gzip&internal_ext=internal_src:dim|wss_push_room_id:${roomId}|wss_push_did:${uniqueId}|fetch_time:${now}|seq:1|wss_info:0-${now}-0-0&cursor=t-${now}_r-1_d-1_u-1_h-1&host=https://live.douyin.com&aid=6383&live_id=1&did_rule=3&debug=false&maxCacheMessageNumber=20&endpoint=live_pc&support_wrds=1&im_path=/webcast/im/fetch/&user_unique_id=${uniqueId}&device_platform=web&cookie_enabled=true&screen_width=1920&screen_height=1080&browser_language=zh-CN&browser_platform=Win32&browser_name=Mozilla&browser_version=5.0%20(Windows%20NT%2010.0;%20Win64;%20x64)%20AppleWebKit/537.36%20(KHTML,%20like%20Gecko)%20Chrome/111.0.0.0%20Safari/537.36%20Edg/111.0.1661.62&browser_online=true&tz_name=Asia/Shanghai&identity=audience&room_id=${roomId}&heartbeatDuration=0&signature=${sign}`;
				// 服务地址 发送
				const client = new DyClient();
				client.init(wsUrl);
				this.ws = client.ws;;
				client.accept = (message) => {
					if (message) {
						let m = handleMessage(message);
					}
				};
				client.onMsg = res=>{
					if(!['WebcastSocialMessage','WebcastChatMessage'].includes(res.method)) return
					this.list.push(res);
					this.params.total = this.list.length;
					if(res.sec_uid)this.saveComment(res) 
				}
				
				client.onOff = (flag) => {
					this.params.isPlay = flag;
				};
			},
		 
			 
			async qrcode(item, el) {
				
				if (item.el === el) return;
				el.innerHTML = '';
				item.el = el;
				new QRCode(el, {
					width: 150,
					correctLevel: 1,
					height: 150,
					text: `https://www.douyin.com/user/${item.sec_uid}`
				})
			},

		}
	}
</script>
